<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="generator" content="Jekyll v{{ jekyll.version }}">

        <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic|Open+Sans:400,400italic,600,600italic,700,700italic|Inconsolata:400,700">
		<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
		<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
		<link rel="apple-touch-icon" href="{{ site.baseurl }}/apple-touch-icon.png">
		<link rel="icon" type="image/png" href="{{ site.baseurl }}/touch-icon.png" sizes="192x192">
		<link rel="icon" type="image/png" href="{{ site.baseurl }}/images/favicon.png">

        <!-- Start: Github Ribbon -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css" />
        <!--[if lt IE 9]>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.ie.min.css" />
        <![endif]-->
        <!-- End: Github Ribbon -->

		{% feed_meta %}
		{% seo %}

		{% if jekyll.environment == 'production' and site.google_analytics_key != '' %}
			<script>
				(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
				(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
				m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
				})(window,document,"script","//www.google-analytics.com/analytics.js","ga");

				ga("create", "{{ site.google_analytics_key }}", "auto");
				ga("send", "pageview");
			</script>
		{% endif %}
    </head>

	<body>
    <a class="github-fork-ribbon" href="https://github.com/apiato/apiato" title="GitHub Repository">GitHub Repository</a>

    <header>
			<h1>
                <!-- WARNING: when uncommenting the image go to `docs/css/main.scss` and change `$nav-header-height` from 30 to 60 `$nav-header-height: 60px;. Also remove the title from the div.-->
				<!--<a href="{{ site.baseurl }}/"><img src="{{ site.baseurl }}/images/emblem.svg" width="40" height="40" alt="{{ site.title }} logo"></a>-->
				<div style="margin-left: 70px">{{ site.title }}</div>
				<button type="button" class="open-nav" id="open-nav"></button>
			</h1>

			<form action="{{ site.baseurl }}/search/" method="get">
				<input type="text" name="q" id="search-input" placeholder="Search.." autofocus>
				<input type="submit" value="Search" style="display: none;">
			</form>

			<nav {% if site.show_full_navigation %}class="full-navigation"{% endif %}>
				<ul>
					<li class="nav-item top-level {% if page.url == '/' %}current{% endif %}">
						{% assign home = site.html_pages | where: 'url', '/' | first %}
						<a href="{{ site.baseurl }}/">{{ home.title }}</a>
					</li>
				</ul>

				<ul>
                    {% assign docsGroupedByCategory = site.docs | group_by: "category" %}
                    {% for category in site.categories-order %}
                    {% assign currentCategory = docsGroupedByCategory | where: 'name', category | first %}

                    <li class="nav-item top-level {% if currentCategory.name == page.category %}current{% endif %}">
                        {% assign items = currentCategory.items | sort: 'order' %}
                        <a href="{{ site.baseurl }}{{ items.first.url }}">{{ currentCategory.name }}</a>
                        <ul>
                            {% for item in items %}
                            <li class="nav-item {% if item.url == page.url %}current{% endif %}"><a href="{{ site.baseurl }}{{ item.url }}">{{ item.title }}</a></li>
                            {% endfor %}
                        </ul>
                    </li>
                    
                    {% endfor %}
                </ul>

				<ul>
					<li class="nav-item top-level {% if page.url == '/changelog/' %}current{% endif %}">
						{% assign changelog = site.html_pages | where: 'url', '/changelog/' | first %}
						<a href="{{ site.baseurl }}/changelog/">{{ changelog.title }}</a>
					</li>
					<li class="nav-item top-level">
						<a href="https://github.com/apiato/awesome-apiato" target="_blank">3rd Party Apiato Containers</a>
					</li>
				</ul>
			</nav>
		</header>

		<section class="main">
			<div class="page-header">

                <!-- Apiato Docs -->
                <ins class="adsbygoogle"
                     style="display:inline-block;width:900px;height:90px"
                     data-ad-client="ca-pub-9826129398689742"
                     data-ad-slot="2082425099"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>

                <br>
                <br>
                <br>

				<!--<h2>{% if page.category %}{{ page.category }}{% else %}{{ site.title }}{% endif %}</h2>-->
				<h3>{{ page.title }}</h3>
			</div>
			<article class="content">
				{{ content }}
			</article>
		</section>

		<script>
			document.getElementById("open-nav").addEventListener("click", function () {
				document.body.classList.toggle("nav-open");
			});
		</script>
	</body>
</html>
